6
תגובות

הקוד מפסיק לרוץ

פתח soogo ,
יצרתי כפתור "עריכה" שבלחצה הופך לכפתור "שמירה" ובלחיצה נוספת הופך לכפותר "עריכה"
אבל אחרי לחיצה אחת הקוד מפסיק לרוץ
$(document).ready(function()
{
    $(".edit").click(function()
    {
      $(".edit").replaceWith("<a href=\"#\" class=\"save\">Save</a>")
    });


    $(".save").click(function()
    {
      $(".save").replaceWith("<a href=\"#\" class=\"edit\">Edit</a>")
    });
});

6 תשובות

avatar ענה net5basal ב 14 לפברואר 2014 #

עשית פה שתי כפתורים שונים לפי מה שאני רואה
בקטע קוד הראשון אתה לוחץ על כפתור אחד ובקטע השני על כפתור אחר
תסביר יותר את הבעיה
ותשים את הקוד של הHTML גם

avatar ענה soogo ב 14 לפברואר 2014 #

<a href="#" class="edit">Edit</a>


זה כפתור שמשנה את העיצוב שלו בהתאם ללחיצה
אבל אחרי שאני מפעיל את הפונקציה הראשונה הפונקציה השנייה לא מתבצעת כשקוראים לה

avatar ענה zacharya ב 14 לפברואר 2014 #

$(document).ready(function()
{
    $(".edit").click(function()
    {
      $(this).replaceWith("<a href=\"#\" class=\"save\">Save</a>")
    });


    $(".save").click(function()
    {
      $(this).replaceWith("<a href=\"#\" class=\"edit\">Edit</a>")
    });
});

avatar ענה net5basal ב 14 לפברואר 2014 #

תסביר לי משהו אחד כי אני לא מבין
בפונקציה השניה אתה קורא לאלמנט עם קלאס של SAVE שאתה לוחץ על האלמנט הזה ואני לא רואה בHTML שלך שום אלמנט כזה

אה אתה יוצר אותו בלחיצה הראשונה הבנתי בסדר.
כן הפתרון שנתנו לך אמור לעבוד

avatar ענה soogo ב 14 לפברואר 2014 #

הפתרון שנתנו לא עובד
זה נשאר אותו דבר

avatar ענה ldbrgr ב 14 לפברואר 2014 #

למה אתה כותב html בJS? ועוד עם jQuery? זאת שיטה מכוערת וממש לא יעילה.
תשתמש ב toggle ולא בreplaceWith
משהו כזה:

<!-- /* Style */ -->
<style>
  .toggleable{ display:none; }
  .toggleable:first-of-type{ display: block; }
</style>
<!-- /* Script */ -->
<script>
$(function(){
  var toggleables = $(".toggleable");
  toggleables.click(function(e){
    e.preventDefault();
    toggleables.toggle();
  });
});
</script>
<!-- /* Elements */ -->
<div id="toggleables">
  <a href="#" class="save toggleable">Save</a>
  <a href="#" class="edit toggleable">Edit</a>
</div>